<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS样式</title>
    <link rel="stylesheet" type="text/css" href="css/CSS样式.css">
</head>
<body>
<h1>背景</h1>
<div class="back"></div>
<h1>边框/轮廓</h1>
<div class="original"></div>
<div class="bian"></div>
<div class="lun"></div>
<div class="clear">
    <pre>

    注：上面这3个div的浮动会导致下面的元素环绕，为了取消这个环绕只需要下一个元素清除浮动即可。
    clear:both;
    </pre>
</div>
<form action="">
    <input type="text" value="输入框"/>
    <a href="#">链接</a>
</form>
<pre>
    border与outline的区别
    1.outline是不占空间的，即不会增加额外的width或height
    2.outline有可能是非矩形的
    3.border可应用于几乎所有有型的HTML元素，而outline是针对链接、表单控件和ImageMap等元素设计
    4.outline的效果将随元素的focus而自动出现，相应的由blur而自动消失。这些都是浏览器的默认行为，无需js配合CSS来控制。
</pre>
<h1>文本</h1>
<div>
    <p>从我们上面的实例中我们也知道，RGBA比元素设置CSS的透明度更好，因为单独的颜色可以在不影响整个元素的透明度，他不会影响到元素其他的属性，比如说边框，字体同时也不会影响到其他元素的相关透明度。著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。</p>
</div>
<h1>盒阴影</h1>
<div class="demo demo2"></div>
<h1>颜色透明</h1>
<h4>rgba</h4>
<ul class="rg">
    <li class="rgba rgba1">1</li>
    <li class="rgba rgba2">0.8</li>
    <li class="rgba rgba3">0.6</li>
    <li class="rgba rgba4">0.4</li>
    <li class="rgba rgba5">0.2</li>
    <li class="rgba rgba6">0</li>
</ul>
<h4>opacity</h4>
<ul class="op">
    <li class="opacity opacity1">100%</li>
    <li class="opacity opacity2">80%</li>
    <li class="opacity opacity3">60%</li>
    <li class="opacity opacity4">40%</li>
    <li class="opacity opacity5">20%</li>
    <li class="opacity opacity6">0</li>
</ul>
<pre>

    rgba和opacity的区别就是opacity后代元素会随着一起具有通明星，而rgba不具有这样的问题。
</pre>
<h1>表格</h1>
<table border="10">
    <caption>标题</caption>
    <tr>
        <th colspan="2">内容</th>
    </tr>
    <tr>
        <td>1</td>
        <td></td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>
</body>
</html>